<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>北京科技报</title>
		<link href="css/common.css" rel="stylesheet">
		<link href="css/result.css" rel="stylesheet">
		<link href="css/bookstarp.css" rel="stylesheet">
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="vue_det">
			<div class="search-top-box flex align-center">
				<div class="search-top flex-one flex align-center padding-lr-12">
					<img class="search-img" src="images/searchpr.png" />
					<input class="search-input font-14" type="text" placeholder="搜索内容" />
				</div>	
				<div class="font-14">取消</div>
			</div>	
			<div class="box">
				<div id="container">
					<div class="border padding-tb-16">
						<a href="">
							<div class="flex">
								<img class="content-left-img" src="images/app.png" />
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”
									</div>
									<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10">2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
					
					<div class="border padding-tb-16">
						<a href="">
							<div class="flex">
								<div class="position-relative margin-right-10" style="width: 35%;">
									<img class="content-left-img" style="width: 100%;" src="images/app.png" />
									<div class="content-live flex align-center justify-center">
										<img src="images/ing.png" style="width: 12px;height: 12px;" />
										<div class="color-ff font-11 margin-left-4">正在直播</div>
									</div>
								</div>
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”
									</div>
									<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10">2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
					
					<div class="border padding-tb-16">
						<a href="">
							<div class="flex">
								<img class="content-left-img" src="images/app.png" />
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”
									</div>
									<div class="font-12 text-cut-one margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10" style="color: #4EAAFF;">· 直播预告 2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
					
					<div class="border padding-tb-16">
						<a href="">
							<div class="flex">
								<div class="position-relative margin-right-10" style="width: 35%;">
									<img class="content-left-img" style="width: 100%;" src="images/app.png" />
									<div class="play-btn">
										<img src="images/play.png" alt="" />
									</div>
								</div>
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”
									</div>
									<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10">2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
					
					<div class="border padding-tb-16">
						<a href="">
							<div class="flex">
								<img class="content-left-img" src="images/app.png" />
								<div class="flex-one flex flex-column justify-between">
									<div class="font-15 text-cut-two margin-top-4">
										<span class="list-span">专题</span> 
										2024年“世界地球日”系列活动之“自然资源科普小讲师”
									</div>
									<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
										<span class="margin-right-10">2024/07/12</span>
										<span>科普中央厨房</span>
									</div>
								</div>
							</div>
						</a>
					</div>
				</div>
				<div class="text-center font-14 margin-top-14" style="color: #9CA5AD;">{{isLoading?'加载中':'滑动加载更多'}}</div>
				<div class="flex flex-column align-center justify-center" style="margin-top: 50px;">
					<img src="images/none.png" style="width: 268px;height: 198px;">
					<div class="font-16 margin-top-14" style="color: #9CA5AD;">暂无相关信息</div>
				</div>
			</div>
		</div>
	</body>
</html>


<script>
	var vm = new Vue({
		el: '#vue_det',
		data: {
			isLoading: false
		},
		mounted: function() {
			window.addEventListener('scroll', () => {
			  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
			  if (clientHeight + scrollTop >= scrollHeight && !this.isLoading) { // 5是个阈值，控制距离底部时加载
				this.loadMore();
			  }
			});
		},
		methods: {
			loadMore: function() {
				this.isLoading = true;
				setTimeout(() => {
					// 获取容器元素
					var container = document.getElementById("container");
					// 创建一个新的div元素
					var newDiv
					// 将新创建的div添加到容器的最后
					container.insertAdjacentHTML('beforeend',newDiv);

					this.isLoading = false;
				}, 500); // 模拟异步加载数据
			}
		}
	})
</script>